<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        :multiple-selected="false"
        @selection-change="onSelectionChange"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
      </PageableTable>
    </div>
  </div>
</template>

<script>
import TableFilter from './components/tableFilter'
import PageableTable from '@neu/biz-core/components/PageableTable'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import databind from '@neu/biz-core/mixins/databind'
import { page } from '@neu/dcam-ui/api/logs'
import { formatDate } from '@neu/biz-core/utils/utils'
import { findByDictionaryType } from '@neu/dcam-ui/api/dictionary'

export default {
  name: 'LogsPage',
  components: {
    TableFilter,
    PageableTable
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      title: '',
      r: page,
      insideColumns: [
        // { title: '应用标识', key: 'app' },
        { title: '操作用户', key: 'account', display: true, width: 200, render: (h, params) => {
          let txt = '-'
          if (params.row.username) {
            txt = params.row.username
            if (params.row.account) {
              txt += '（' + params.row.account + '）'
            }
          } else {
            if (params.row.account) {
              txt = params.row.account
            }
          }

          return h('span', txt)
        }
        },
        { title: 'IP地址', key: 'ip', width: 160 },
        { title: '操作类型', key: 'operation', display: true, width: 100, render: (h, params) => {
          const source = this.operations.filter(t => {
            return t.code === params.row.operation
          })
          const sourceDesc = source.length === 1 ? source[0].text : params.row.operation
          return h('span', [
            h('el-tag', sourceDesc)
          ])
        }
        },
        {
          title: '操作时间',
          key: 'time',
          render: (h, params) => { return h('span', formatDate(params.row.time)) },
          display: true,
          width: 140,
          sortable: 'custom'
        },
        // { title: '调用API', key: 'api' },
        { title: '备注信息', key: 'extra' }
      ],
      operations: []
    }
  },
  created() {
    this.fetch()
  },
  mounted() {
    findByDictionaryType('operations').then(res => {
      if (res.status === 'success') {
        this.operations = res.data
      }
    })
  },
  methods: {
  }
}
</script>
